<!--
 * @Author: 陈迪秀 1170776994@qq.com
 * @Date: 2024-02-23 17:28:34
 * @LastEditors: yuanjunyi
 * @LastEditTime: 2024-04-18 18:19:46
 * @FilePath: \stell-mall\src\views\steel-home\major\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="gg-home">
    <stell-home-header />
    <!--     钢构之家 -->
    <div class="banner-area">
      <div class="left">
        <img
          src="https://gggj-fe.oss-cn-hangzhou.aliyuncs.com/steel-mall/steel-structure-home1.png"
          alt=""
          srcset=""
        />
      </div>
      <div class="right">
        <div class="right__top">
          <img
            src="https://gggj-fe.oss-cn-hangzhou.aliyuncs.com/steel-mall/steel-structure-home2.png"
            alt=""
          />
        </div>
        <div class="right__bottom">
          <img
            src="https://gggj-fe.oss-cn-hangzhou.aliyuncs.com/steel-mall/steel-structure-home3.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="information-area">
      <div class="left">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane
            v-for="item in tabList"
            :label="item.label"
            :name="item.name"
          ></el-tab-pane>
        </el-tabs>
        <card-list class="card-list-area" :card-list="newsList"></card-list>
        <el-button type="primary" @click="handleAddMore" class="add-more"
          >点击加载更多</el-button
        >
      </div>

      <trends-list></trends-list>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import StellHomeHeader from "../components/header/index.vue";
import CardList from "../components/card-list/index.vue";
import TrendsList from "../components/trends-list/index.vue";
import { newsList } from "./constants"
const activeName = ref<string>("01");
const tabList = [
  {
    label: "全部",
    name: "01",
  },
  {
    label: "行业动态",
    name: "02",
  },
  {
    label: "政策法规",
    name: "03",
  },
  {
    label: "公司动态",
    name: "04",
  },
];
/**
 * @description: tab切换
 * @param {*} tab
 * @param {*} event
 * @return {*}
 */
const handleClick = (tab: any, event: Event) => {
  console.log(tab, event);
};

/**
 * @description: 加载更多
 * @return {*}
 */
const handleAddMore = () => {
  // cardList.value++;
};
</script>

<style scoped lang="scss">
.gg-home {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f9f9f9;
  padding-bottom: 50px;
}

.banner-area {
  display: flex;
  padding-top: 24px;

  .left {
    width: 940px;
    height: 350px;
    margin-right: 20px;
  }

  .right {
    display: flex;
    flex-direction: column;

    &__top {
      width: 320px;
      height: 165px;
      margin-bottom: 19px;
    }

    &__bottom {
      width: 320px;
      height: 165px;
      border-radius: 0px 0px 0px 0px;
    }
  }

  img {
    width: 100%;
    height: 100%;
  }
}

.information-area {
  width: 1280px;
  display: flex;
  margin-top: 24px;
  justify-content: space-between;

  .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 940px;

    .add-more {
      color: #1678ff;
      background: #fff;
    }
  }

  .card-list-area {
    margin: 24px 0 40px;
  }

  :deep(.el-tabs__item.is-active) {
    background: #1678ff;
    color: #fff;
  }

  :deep(.el-tabs__item.is-top:last-child) {
    padding-right: 20px;
  }

  :deep(.el-tabs--top .el-tabs__item.is-top:nth-child(2)) {
    padding-left: 20px;
  }

  :deep(.el-tabs__active-bar) {
    display: none;
  }

  :deep(.el-tabs__nav-wrap::after) {
    display: none;
  }

  :deep(.el-tabs) {
    border-bottom: 1px solid #dfe1e6;
    width: 100%;
  }

  :deep(.el-tabs__header) {
    margin: 0px 0 7px;
  }

  :deep(.el-tabs__item) {
    color: #7a869a;
  }
}
</style>
